// 父子通信 ，靠属性
// 父->子 ， 属性
// 子->父 ， callback( 属性传过去一个回调函数)
// 插槽
import React, { useState } from 'react'
import { Button } from 'antd'

const Navbar = (props) => {
  console.log(props)
  return <div>
    navbar -- {props.myname}
    <Button onClick={() => {
      props.onEvent()
    }}>click</Button>
  </div>
}

const Sidebar = () => {
  return <div>
    sidebar -- 我终于显示出来了
  </div>
}

const Child = (props) => {
  return <div>
    child -- {props.children}
  </div>
}

export default function App() {
  const [show, setshow] = useState(false)
  return (
    <div>
      <Navbar myname="测试的抽屉" onEvent={() => {
        console.log("父组件给子组件传递一个回调函数,在子组件中调用,达到修改父组件的目的")
        setshow(!show)
      }} />
      {/* 动态显示 */}
      {
        show ? <Sidebar /> : null
      }
      {/* 插槽 */}
      <Child>
        <div>child的插槽1</div>
        <div>child的插槽2</div>
      </Child>
    </div>
  )
}
